/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import * as React from "react";
import { Button } from "../Button";
import { Tooltip } from "../Tooltip";
import { storiesOf } from "@storybook/react";
import { Touchable } from "../Touchable";
import { useSpring, animated } from "@react-spring/web";
import {usePressable} from "../Hooks/pressable-hook";
import {useDrag} from "@use-gesture/react";
import cx from "classnames";
import {safeBind} from "../Hooks/compose-bind";
import {useTheme} from "../Theme/Providers";


function TouchableHighlight() {
  const [pressCount, setPressCount] = React.useState(0);
    function onPress(e) {
        console.log("Pressed! 点击了");
        setPressCount(pressCount + 1);
        e.stopPropagation();
    }
    function onLongPress(e) {
        console.log("Pressed!Long 长按了");
        setPressCount(pressCount + 10);
        e.stopPropagation();
        e.preventDefault();
    }

  const { bind, active, hover } = usePressable({
        onPress,
        behavior: "link"
  });

  return (
    <div>
      当前hover={ `${hover}` }; 而active={ `${active}` } ;  press {pressCount}下
      <div
        role="button"
        tabIndex={0}
        {...bind}
        css={{
          border: hover ? "4px solid red" : "1px dotted",
          userSelect: "none",
          outline: "none",
          background: active ? "blue" : "bisque",
          lineHeight: '3rem',
        }}
      >
        This is a测试 touchable highlight 按下
      </div>
    </div>
  );
}

export const TouchableStories = storiesOf("Touchable", module)
  .add("basic", () => {
    return (
      <div css={{ padding: "100px" }}>
        <TouchableHighlight />
        <p>
          Aute Lorem laboris nostrud culpa eiusmod in ipsum laborum. Minim
          cupidatat dolore tempor elit irure officia qui. Anim ea dolor
          excepteur eiusmod incididunt consectetur reprehenderit id. Incididunt
          tempor reprehenderit laboris eu exercitation voluptate proident
          nostrud eiusmod. Laborum consectetur culpa Lorem exercitation ut
          occaecat est proident labore ullamco id mollit. Labore reprehenderit
          commodo cupidatat mollit nostrud velit. Exercitation veniam consequat
          commodo aute incididunt anim duis incididunt sint officia veniam.
          Aliqua tempor ullamco in occaecat ullamco est ea aliqua exercitation
          amet cillum reprehenderit. Deserunt pariatur duis id dolore ut enim
          irure enim consectetur amet anim enim et. Elit Lorem veniam sit non
          magna esse.
        </p>
      </div>
    );
  })
  .add("Touchable class", () => {
    return (
      <Touchable
        css={{
          "&.Touchable--hover": {
            background: "green"
          },
          "&.Touchable--active": {
            background: "red"
          }
        }}
      >
        Hello按钮
      </Touchable>
    );
  })
  .add("拉拽能跟随", () => {
      const theme = useTheme();
      const [{ xy }, setSpring] = useSpring(() => ({
          xy: [0, 0]
      }));

      function onEnd() {
          setSpring({
              xy: [0, 0],
              immediate: false
          } );
      }

      const bindDrag= useDrag((state) => {
              const { active, axis, movement: [mx,my], cancel, event, swipe:[swpx,swpy],
                  canceled, type } = state;
              // console.log("拉按type",state,"active",active,"canceled:",canceled,"离swipe",swpx);
              event.stopPropagation();
              const normaltrigs= ( !canceled && ( swpx>0 || mx >5) );
              const trigged= !active && axis==='x' && (normaltrigs );
              if(trigged){
                  if(normaltrigs){
                      console.log("setOpenTablist(true)");
                      //onIndexChange(index - 1);
                  }
                  cancel();
              }
              else{
                  if(!canceled && axis!=='x') {
                      cancel();
                  }
              }
              //动画
              setSpring({
                  xy: [mx,my],
                  //被拖拉的DIV会立刻跟着一起走的
                  immediate: true
              });
          } ,
          {
              swipe: {velocity: 0.1},
              filterTaps: true,
          });

      //下面<animated.div替换普通的Div:
      return (
          <animated.div
                          className={cx("Touchable",  {
                              "Touchable--hover": 1,
                              "Touchable--active": 2
                          })}
                          style={{
                              touchAction: 'none',
                              transform: xy.to((x, y) => `translate3d(${x}px, ${y}px, 0)`)
                          }}
                          css={{
                              background:  theme.colors.background.tint1
                          }}
                          { ...bindDrag() }
          >
           号码等待完全无
          </animated.div>
      );
    });

